.ScreenTemp {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;

	&::-webkit-scrollbar {
		display: none;
	}

	&.TempTrue {
		overflow-y: scroll;
		overflow-x: hidden;
	}

	&.TempFalse {
		overflow: hidden;
	}

	& > .Temp {
		&.TempA01 {
			width: 100%;
			height: 320px;
			margin-bottom: 8px;
			position: relative;
			z-index: 1;

			.TempBox {
				padding: 16px;

				& > div {
					flex: 1;
					height: 88%;
					margin: 0 16px;
					position: relative;
					z-index: 1;
					color: var(--color);
					display: flex;
					align-items: flex-start;
					justify-content: center;
					flex-direction: column;
					padding: 0 16px;

					&::after {
						position: absolute;
						content: "";
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						background: var(--color);
						opacity: 0.1;
						z-index: -1;
					}

					& > div:nth-child(1) {
						display: flex;
						align-items: center;
						justify-content: center;

						& > img {
							width: 52px;
							height: 52px;
							display: block;
							margin-right: 16px;
						}

						& > div {
							font-family: MicrosoftYaHei, MicrosoftYaHei;
							font-weight: bold;
							font-size: 18px;
						}
					}

					& > div:nth-child(2) {
						font-family: DIN Condensed;
						font-weight: bold;
						font-size: 54px;
						text-indent: 12px;
					}

					& > div:nth-child(3) {
						font-family: MicrosoftYaHei, MicrosoftYaHei;
						font-weight: bold;
						font-size: 18px;
						text-indent: 12px;
					}

					& > div:nth-child(4),
					& > div:nth-child(5) {
						position: absolute;
						width: 16px;
						height: 16px;
						z-index: 1;
					}

					& > div:nth-child(4) {
						left: -1px;
						top: -1px;
					}

					& > div:nth-child(5) {
						right: -1px;
						bottom: -1px;
					}

					& > div:nth-child(4)::after,
					& > div:nth-child(5)::after,
					& > div:nth-child(4)::before,
					& > div:nth-child(5)::before {
						position: absolute;
						content: "";
						z-index: 1;
						background: rgba(65, 255, 141, 1);
					}

					& > div:nth-child(4)::after {
						left: 0;
						top: 0;
						width: 100%;
						height: 2px;
					}

					& > div:nth-child(4)::before {
						left: 0;
						top: 0;
						width: 2px;
						height: 100%;
					}

					& > div:nth-child(5)::after {
						right: 0;
						bottom: 0;
						width: 100%;
						height: 2px;
					}

					& > div:nth-child(5)::before {
						right: 0;
						bottom: 0;
						width: 2px;
						height: 100%;
					}
				}
			}
		}

		&.TempA02 {
			width: calc(50% - 8px);
			height: 400px;
			margin-bottom: 16px;
			margin-right: 16px;
		}

		&.TempA03 {
			width: calc(50% - 8px);
			height: 400px;
			margin-bottom: 16px;
		}

		&.TempA04 {
			width: 100%;
		}

		&.TempA05 {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.35);
		}

		.TempBox {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		& > .toggle {
			position: absolute;
			right: 0;
			top: 0;
			z-index: 2;
			height: var(--ItemTItleTitleHeight);
			display: flex;
			align-items: center;
			justify-content: center;
			text-transform: uppercase;
			transition: 0.5s ease;
			cursor: pointer;
			user-select: none;
			font-family: MicrosoftYaHei, MicrosoftYaHei;
			font-weight: bold;
			font-size: 20px;
			color: #ffffff;
			padding: 0 24px;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				height: 2px;
				width: 0;
				background-color: #ffc506;
				transition: 0.5s ease;
			}

			&:hover {
				color: #1e1e2b;
				transition-delay: 0.5s;
			}

			&:hover::before {
				width: 100%;
			}

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				height: 0;
				width: 100%;
				background-color: #ffc506;
				transition: 0.4s ease;
				z-index: -1;
			}

			&:hover::after {
				height: 100%;
				transition-delay: 0.4s;
				color: aliceblue;
			}
		}
	}
}
